<template>
    <button class="btn"  @click="deleteCourse" :title="$t('course.Delete')"><el-icon><Delete/></el-icon></button>

    <el-dialog v-model="dialogVisible" :title="$t('course.IfDeleteCou')" width="30%" >
    <span>{{$t('course.DeleteCou')}}{{queryCourseName()}}</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="deleteCourseBtn">
            {{$t('course.confirm')}}
        </el-button>
        <el-button type="primary" @click="dialogVisible = false">
            {{$t('course.cancel')}} 
        </el-button>      
      </span>
    </template>
  </el-dialog>


</template>
<script>
  import { Delete } from '@element-plus/icons-vue'
    export default {
        name: 'DELETE_COURSE_TABLE',
        props:["courseList"],
        components:{
            Delete  
        }, 
        data: function(){
        return {
            dialogVisible:false,
            formData:{
                courseUuids:[]
            }
        } 
        },
    methods:{
        deleteCourse(){
            this.$emit("getSelectData");
            this.dialogVisible = true;
            var that = this;
            this.formData.courseUuids="";
        },
        deleteCourseBtn(){
            var that = this;
           this.courseList.some(function(item,index){
            that.formData.courseUuids += item.courseUuid;
            if(index !== (that.courseList.length -1)){
                that.formData.courseUuids +="," ;
            }
           });
            window.http.post('/api/course/delete',this.formData).then(res => {
            //  console.info(JSON.stringify(res));
               var data = res.data;
               if(data.success){ 
                  that.$message.success(that.$t('course.deletesuccess'));
                    that.$emit("reback");
                    that.dialogVisible=false;
               }else{
                  that.$message.error(that.$t('course.deletefail'));
               } 
            })
            .catch(function(error){
               that.$message.error(that.$t('course.ServerException'));
            });
        },
        queryCourseName(){
            var courseName="";
            var that = this;
            this.courseList.some((item,index)=>{
                if(item && item.courseName !==""){
                    courseName += item.courseName;
                    if(index !== that.courseList.length -1){
                        courseName +=",";
                    }
                }
            });
            return courseName;
        }
    },
    mounted(){
        var that = this;
        this.$bus.on("deleteCourseById",function(){
            that.dialogVisible = true;
           
            that.formData.courseUuids="";
        })
    },
    unmounted(){
            this.$bus.off("deleteCourseById");
    }
    }

</script>
    <style>
    html,
    body, 
    #app{
    height: 100%;
    }
</style>
